<!DOCTYPE html>
<html>
<head>
    <title>预算执行统计</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="木兰湾管理系统">
    <script type="text/javascript" src="../../static/include/header-css.js"></script>
</head>
<body>
<!--导航-->
<div class="weui-tab" style="height:44px;"   id="budgetTab">
    <div class="weui-tab-nav">
        <a href="javascript:setPeriodAndSearch('MONTHLY');" class="weui-navbar__item weui-nav-green"> 月预算 </a>
        <a href="javascript:setPeriodAndSearch('YEARLY');" class="weui-navbar__item weui-nav-green"> 年预算</a>
    </div>
</div>

<div>
    <form id="search-form">
        <div class="weui-cell mulanbay_select-before">
            <div class="weui-cell__hd"><label class="weui-label">选择日期</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="选择日期" name="bussDay" id="bussDay">
            </div>
        </div>
        <div class="weui-cell mulanbay_select-before">
            <div class="weui-cell__hd">
                <label class="weui-label">数据类型</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-input" name="statType">
                    <option value="RATE">按比例</option>
                    <option value="VALUE">按金额</option>
                </select>
            </div>
        </div>
        <input type="text" style="display:none;" name='period' id="period" value="MONTHLY"/>
    </form>
</div>
<a href="javascript:budgetTimelineStat();" class="weui-btn weui-btn_primary">统计</a>

<!--数据显示-->
<div id="container"
     style="width: 100%; height: 65%; margin: 0 auto">
</div>

<div class="button_sp_area" align="center">
    <a href="javascript:scroll(0,0);" class="weui-btn weui-btn_mini weui-btn_primary">返回顶部</a>
</div>
<br>
<script type="text/javascript" src="../../static/include/footer-js.js"></script>
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="../../static/js/echarts/mulanbaychart.js"></script>
<!--顶部导航使用-->
<script type="text/javascript" src="../../static/js/iscroll-lite.min.js"></script>
<script>
    $(function() {
        var period = getQueryVariable('period');
        if(period==null){
            period = 'MONTHLY';
        }
        var index=0;
        if(period == 'YEARLY'){
            index=1;
        }
        $('#period').val(period);
        $('#budgetTab').tab({defaultIndex:index,activeClass:"bg-green"});
        $("#bussDay").calendar({
            //初始值无效
            dateFormat: 'yyyy-mm-dd'
        });
        $('#bussDay').val(getNowDateString());
        budgetTimelineStat();
    });
    function setPeriodAndSearch(period) {
        $('#period').val(period);
        budgetTimelineStat();
    }
    function budgetTimelineStat() {
        var para = form2Json("search-form");
        var url = '/budget/timelineStat';
        doAjax(para, url, 'GET',false, function(data) {
            data.title='';
            data.subTitle='';
            data.showMarkPoint=false;
            data.showMarkLine=false;
            createLineData(data);
        });
    }
</script>
</body>
</html>